header {

    padding: 0 5%;
    width: 100%;

    height: 5%;

    background-color: #478ce7;

    display: flex;
    align-items: center;

    span {
        width: 40%;
        display: flex;

        span {
            width: 30%;
        }
    }

}

main {
    overflow: auto;
    height: 100%;
    display: flex;

    ul {

        flex-direction: column;
        height: 100%;
        width: 100%;
        display: flex;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #E8E8E8;
        }


        .exc-pic {
            height: 15%;
        }

        .me-nick {
            height: 8%;

            input {
                flex: 1;
                text-align: right;
                color: #666;
            }
        }



        .me-sex {
            height: 8%;

            .sex {
                text-align: right;
                flex: 1;
            }
        }


        .me-city {
            height: 8%;

            div {
                text-align: right;
                flex: 1;
            }
        }


        .me-bir {

            height: 8%;

            div {
               text-align: right;
               flex: 1;
            }

        }


        .me-brief {

            position: relative;
            border-bottom: 0;
            flex-direction: column;

            span {

                align-self: flex-start;
                margin-top: 6%;
                margin-bottom: 6%;

            }

            textarea {
                padding-top: 5%;
                text-indent: 1em;
                resize: none;
                overflow: hidden;
                outline: none;
                background-color: #f7f7f7;
                border-radius: 15px;
                width: 100%;
            }

            .lt-count{
               
                position: absolute;
                width: 100%;
                text-align: right;
                bottom: 10px;
                right: 20px;
                b{
                     font-weight: normal;
                }
            }

        }


        .save-info {

            margin-top: 10%;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            align-self: center;
            width: 90%;
            border-radius: 15px;
            height: 8%;
            border-bottom: 0;
            background-color: #478ce7;
        }









    }
}

.my-pic {

    margin-left: 55%;

    img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }

    span {
        margin-left: 5%;
    }
}